<template>
  <div class="container">
    <div >
         <div class="weui-panel__bd listItem" >
            <div  class="weui-media-box weui-media-box_appmsg" hover-class="none" @click="toDetail(kcList.id,type)" >
                <div class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                    <div class="thumb"><image class="weui-media-box__thumb " :src="kcList.thumb" mode="aspectFill"/></div>
                </div>
                <div class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                    <div class="weui-media-box__desc"> {{kcList.title}}</div>
                    <div class='price'>
                        <div class="weui-cell__bd"><span>￥{{kcList.price}}</span> <span class="oldPrice">￥{{kcList.prime_price}}</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="priceINfo">
        <div class="weui-cell">
          <div class="weui-cell__bd">报名费用：</div>
          <div class="weui-cell__ft">￥{{fee.course_price}}</div>
        </div> 
        <div class="weui-cell" v-if="fee.discount!=0">
          <div class="weui-cell__bd">会员优惠：</div>
          <div class="weui-cell__ft">-{{fee.discount}}</div>
        </div> 
    </div> 
    <div class="weui-cell">
      <div class="weui-cell__bd"></div>
      <div class="weui-cell__ft"><span class="totalPrice">实付：￥{{fee.total_fee}}</span></div> 
    </div>
    <div class="warn weui-cell">温馨提示：根据支付时间来决定抢课排名哦~</div>
    <div class="footer">
         <van-button type="info" size="large" custom-class="toBuy" @click="tobuy(kcList.id)">立即抢课</van-button>
    </div>
  </div>
</template>

<script>
import courseList from "@/components/list";
import {rushorder} from "@/api/rush"
import {rushFee} from "@/api/rush"
import {pay} from "@/utils/pay"
export default {
  components: {
    courseList
  },

  data() {
    return {
      kcList: {},
      fee:""
    };
  },
  methods: {
    tobuy(keid){
       let data={};
       data.payment=1;
       data.id=keid;
       rushorder(data).then(res=>{
         if(res.code==200){
           pay(res.data).then(res=>{
              wx.navigateTo({
                url:"/pages/paySuccess/main"
              })
                
           })
         }else if(res.code==201){
           wx.showToast({
             title:res.msg,
             icon: 'none',
           });
             
         }
       }).catch(res=>{
          wx.showToast({
             title:res.msg,
             icon: 'none',
           });
       })
    },
    getFee(){
      let data={};
       data.id=this.kcList.id;
       rushFee(data).then(res=>{
         this.fee=res.data
       })
    }
  },
  created() {},
  onLoad(options){
    console.log(options)
      this.kcList=JSON.parse(options.info)
      console.log(this.kcList)
      this.totalFee=(this.kcList.price-this.discount).toFixed(2)
      this.getFee()
  }  
};
</script>
<style lang="scss">
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  .toBuy {
    background-color: #1a84fb;
    color: #fff;
  }
}

</style>
<style scoped lang="scss">
page {
  background: rgba(244, 245, 245, 1);
}
.warn {
  font-size: 14px;
  font-weight: 500;
  color: rgba(102, 102, 102, 1);
}
.line {
  width: 375px;
  height: 5px;
  background: rgba(244, 245, 245, 1);
}
.priceINfo {
  line-height: 1;
  font-size: 14px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 18px;
  .weui-cell {
    padding-bottom: 0;
  }
}
.totalPrice {
  font-size: 15px;
  font-weight: bold;
  color: rgba(26, 132, 251, 1);
  line-height: 18px;
}
.listItem {
  color: #000;
  .thumb {
    width: 116px;
    height: 83px;
    .weui-media-box__thumb {
      width: 116px;
      height: 83px;
    }
  }
  .weui-media-box {
    padding: 10px 15px;
  }
  .weui-media-box__hd_in-appmsg {
    width: 116px;
    height: 83px;
  }
  .weui-media-box__desc {
    font-size: 14px;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .weui-media-box_appmsg {
    -webkit-box-align: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  .progress {
    font-size: 14px;
    font-weight: 500;
    color: #1a84fb;
    line-height: 1;
    margin-top: 7px;
  }
  .tags {
    line-height: 20px;
    background: rgba(234, 247, 255, 1);
    border: 1rpx solid rgba(70, 183, 255, 1);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(70, 183, 255, 1);
    display: inline-block;
    padding: 0 10px;
    margin-top: 14px;
  }
  .price {
    position: absolute;
    bottom: 10px;
    left: 0;
    padding-left: 142px;
    right: 12px;
    font-size: 15px;
    font-weight: bold;
    color: rgba(233, 181, 94, 1);
    display: flex;
    justify-content: flex-end;
    .oldPrice {
      font-size: 10px;
      font-weight: 500;
      text-decoration: line-through;
      color: rgba(102, 102, 102, 1);
      margin-left: 5px;
    }
  }
  .weui-media-box::after {
    position: absolute;
    bottom: 0;
    right: 15px;
    left: 15px;
    border-bottom: 1rpx solid #ddd;
    content: "";
  }
}
</style>
